<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PromiseAPI的应用</title>
</head>
<body>
<div id="imgList">

<!--    <img id="img" src="./favicon.ico" alt="">-->

</div>
<script>
    let src1 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg"
    let src2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg"
    let src3 = "https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg"

    let imgList = document.getElementById("imgList")


   /* let img = document.getElementById("img");
    img.onload = function (){//当图片标签获得scr属性的时候,图片就开始被加载,等到图片加载成功之后就会触发这个回调函数
        console.log("img.onload")
    }
    img.setAttribute("src",src1)

    console.dir(img);*/

    //promiseAll
    //需求 有三张图片 ,如果这三张图片都加载完成 那么就直接显示到页面中 否则就不展示

    function loadImg(src){
        return new Promise((resolve, reject)=>{
            // ...加载图片
            let img = document.createElement("img");
            img.setAttribute("src",src);//当图片标签获得scr属性的时候,图片就开始被加载
            img.onload = function (){//等到图片加载成功之后就会触发这个回调函数
                console.log("img.onload")
                resolve(img)
            }
            img.onerror = function (){//当图片加载失败之后会触发这个回调函数
                reject("加载超时或失败")
            }
        })
    }

    let pAll = Promise.all([loadImg(src1),loadImg(src2),loadImg(src3)]);
    pAll.then(resolve=>{
        // resolve==> [图片1,图片2,图片3]
        console.log(resolve);
        resolve.forEach(i=>{
            imgList.appendChild(i)
        })
    }).catch(err=>{
        console.log("加载超时或失败")
    })

    //promiseRace
    //需求 有一张图片 ,当这张图片的加载时间超过1s的时候,就不去加载了,并且在页面中显示加载超时,如果1s内完成了加载,那么就在页面中进行展示

    function timeOut(){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("超过1s")
            },1000)
        })
    }

    let pRace = Promise.race([loadImg(src1),timeOut()]);
    pRace.then(resolve=>{
        if(typeof resolve === "string"){
            // imgList.addendChild("加载超时或失败",resolve)
        }else {
            // imgList.addendChild("图片")
        }
    }).catch(err=>{
        // imgList.addendChild("加载超时或失败",err)
    })


</script>
</body>
</html>